<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <section>
        <span><input type="text" name="" placeholder="搜索" /></span>
        <span>点餐</span>
        <span>评价4.5</span>
        <span>商家</span>
      </section>
    </header>
    <main>
      <!-- 渲染左侧导航栏 -->
      <!-- <van-sidebar v-model="activeKey" @change="changeCate">
        <van-sidebar-item
          v-for="(item, index) in shopList"
          :key="index"
          :title="item"
        />
      </van-sidebar> -->

      <van-sidebar v-model="activeKey" @change="changeShop">
        <van-sidebar-item
          v-for="(item, index) in shopList"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <!-- 把左侧导航栏所对应的品牌渲染到右边区域 -->
      <!--  <van-grid :column-num="4">
        <van-grid-item
          v-for="(item, index) in goodsList"
          :key="index"
          :text="item.brand"
          @click="goBrand(item)"
        />
      </van-grid> -->
      <!--  v-for="(item,index) in goodsList"
        :key="index" -->
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        @click="goBrand(item)"
      >
        <template #footer>
          <van-button size="mini">按钮</van-button>
          <van-button size="mini">按钮</van-button>
        </template>
      </van-card>
    </main>
    <footer>
      <div>
        <img src="../assets/3.png" alt="" />
      </div>
      <div>
        <!-- <p class="price">总价:￥{{ getPrice }}</p>
        <p class="Desc">总数量：{{ getSum }}</p> -->
      </div>
      <div class="jisuan">去结算</div>
    </footer>
  </div>
</template>

<script>
import { shop_shopinfo } from "../api/index2";

export default {
  name: "Sort",
  data() {
    return {
      id: "",
      shopList: [],
      activeKey: 0,
      goodsList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },

    goBrand() {

    },
    changeShop(item) {
      shop_shopinfo({ id: this.$route.params.id }).then((res) => {
  /*       this.goodsList = res.data.shopinfo.taglist.goodlist;
        console.log("res.data.goodsList", res.data.shopinfo.taglist.goodlist); */
      });

    },
  },
  created() {
    console.log(this.$route.params.id);
  },
  mounted() {
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      this.shopList = res.data.shopinfo.taglist;
      console.log("res.data.list", res.data.shopinfo.taglist);
    });
  },
};
</script>

<style lang="css" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
}
header {
  min-height: 3.5rem;
  padding-left: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
  border-bottom: 2px solid rgb(245, 245, 245);
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
header span {
  /* background-color: gray; */
  margin-right: 20px;
  margin-bottom: 10px;
}
header span input {
  width: 60px;
  border-radius: 15px;
  vertical-align: middle;
  text-align: center;
  background-color: rgb(245, 245, 245);
  outline: none;
}
header span:hover {
  color: rgb(17, 171, 232);
  border-bottom: 1px solid rgb(17, 171, 232);
}
main {
  flex: 1;
  display: flex;
  overflow: auto;
  background-color: lightgray;
}

footer {
  height: 4.1667rem;
  background-color: #474747;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer img {
  width: 3.5rem;
  height: 3.1667rem;
  margin-top: -10px;
}
footer .jisuan {
  background-color: rgb(16, 199, 16);
  border-radius: 10px;
  color: #fff;
  width: 100px;
  height: 3rem;
  line-height: 3rem;
  font-size: 20px;
  text-align: center;
}
footer .price {
  color: #fff;
  font-size: 18px;
}
footer .Desc {
  color: rgb(184, 184, 184);
  font-size: 14px;
}

.van-card {
  flex: 1;
  align-self: flex-start;
  height: 8rem;
  margin: 0;
}
</style>